/**
 * memo()
 *    概念：一个高阶组件，能够让函数式组件支持 PureComponent 的功能。
 *
 * useCallback()
 *    概念：将一个函数做缓存。
 *    作用：将一个缓存之后的函数传递给经过 memo 处理的组件，能够让该组件缓存不会出现问题。
 *    语法：
 *      const memoCallback = useCallback(callback, deps)
 *      1. callback - 要缓存的函数
 *      2. deps - 依赖项数组
 *      3. memoCallback - 经过缓存的函数
 *
 * useMemo 与 useCallback 的关系
 *
 *    useCallback(callback, deps) => useMemo(() => callback, deps)
 */

import { Button, Space } from "antd";
import { FC, memo, useState, useCallback, useMemo } from "react";

interface HelloProps {
  value: number;
  onChange: (value: number) => void;
  onEdit: () => void;
}
const Hello: FC<HelloProps> = memo(({ value, onChange }) => {
  console.log("Hello Render");

  return (
    <div>
      <Button onClick={() => onChange(value + 1)}>Hello, {value}</Button>
    </div>
  );
});

function App() {
  const [count, setCount] = useState(1);
  const [msg, setMsg] = useState("~");

  // const handleEdit = useCallback(() => {
  //   console.log("handleEdit");
  // }, []);

  const handleEdit = useMemo(
    () => () => {
      console.log("handleEdit");
    },
    []
  );

  return (
    <div>
      <h1>memo</h1>

      <Space>
        <Button onClick={() => setCount((count) => count + 1)}>{count}</Button>
        <Button onClick={() => setMsg((msg) => msg + "~")}>{msg}</Button>
      </Space>

      <hr />

      <Hello value={count} onChange={setCount} onEdit={handleEdit} />
    </div>
  );
}

export default App;
